import { getPhoneCode, login, resetPassword, register } from '@/services/login';
import {
  ArrowLeftOutlined,
  LockOutlined,
  MobileOutlined,
  ExclamationCircleOutlined,
  UserOutlined
} from '@ant-design/icons';
import {
  LoginForm,
  ProFormCaptcha,
  ProFormText,
} from '@ant-design/pro-components';
import { history, useModel } from '@umijs/max';
import { Form, message, Tabs, Checkbox, Modal } from 'antd';
import { useState } from 'react';
import styles from './index.less'

type LoginType = 'check_code' | 'password';

export default () => {
  const [loginType, setLoginType] = useState<LoginType>('password');
  const [resetLoading, setResetLoading] = useState(false);
  const [form] = Form.useForm();
  const { initialState, setInitialState } = useModel('@@initialState');
  const [checkedVal, setCheckedVal] = useState(false);

  const renderCaptcha = () => {
    return (
      <>
        <ProFormText
          fieldProps={{
            size: 'large',
            prefix: <MobileOutlined className={'prefixIcon'} />,
            style: { height: 45 },
          }}
          label="手机号"
          name="phoneNum"
          placeholder={'手机号'}
          rules={[
            {
              required: true,
              message: '请输入手机号！',
            },
            {
              pattern: /^1\d{10}$/,
              message: '手机号格式错误！',
            },
          ]}
        />
        <ProFormCaptcha
          fieldProps={{
            size: 'large',
            prefix: <LockOutlined className={'prefixIcon'} />,
          }}
          label="验证码"
          captchaProps={{
            size: 'large',
          }}
          placeholder={'请输入验证码'}
          captchaTextRender={(timing, count) => {
            if (timing) {
              return `${count} ${'获取验证码'}`;
            }
            return '获取验证码';
          }}
          name="captcha"
          rules={[
            {
              required: true,
              message: '请输入验证码！',
            },
          ]}
          onGetCaptcha={async () => {
            await getPhoneCode(form.getFieldValue('phoneNum')).then(() => {
              message.success('发送成功');
            });
          }}
        />
      </>
    );
  };

  const changCheck = (val) => {
    setCheckedVal(val.target.checked)
  }

  const goLogin = () => {
    history.push('/login');
  }

  return (
    <div className="w-full h-full">
      <div className="max-w-[2560px] items-center h-full justify-evenly">
        <div className={styles.bg_center}>
          <div className={`${styles.content} bg-white rounded-xl overflow-hidden`}>
            <LoginForm
              title="欢迎使用腾云人资"
              layout="vertical"
              onFinish={async (value) => {
                await form.validateFields();

                if (!checkedVal) {
                  Modal.confirm({
                    title: '温馨提示',
                    icon: <ExclamationCircleOutlined />,
                    content: '确认已阅读并同意《服务协议》和《隐私政策》',
                    okText: '确认',
                    cancelText: '取消',
                    onOk: () => {
                      setCheckedVal(true)
                      return register({
                        businessName: value.userName,
                        mobile: value.mobile
                      }).then(async (loginRes: any) => {
                        if (loginRes.success) {
                          message.success('注册成功');
                          history.push('/login');
                        } else {
                          message.error(loginRes.resultMessage);
                        }
                      });
                    }
                  });
                } else {
                  return register({
                    businessName: value.userName,
                    mobile: value.mobile
                  }).then(async (loginRes: any) => {
                    if (loginRes.success) {
                      message.success('注册成功');
                      history.push('/login');
                    } else {
                      message.error(loginRes.resultMessage);
                    }
                  });
                }

              }}
              form={form}
              submitter={{
                searchConfig: {
                  submitText: '注册',
                },
                submitButtonProps: {
                  style: {
                    width: '100%'
                  }
                },
                resetButtonProps: false
              }}

              actions={
                <div
                  style={{
                    marginBlockEnd: 24,
                  }}
                >
                  <Checkbox checked={checkedVal} onChange={changCheck} name="autoLogin">
                    已阅读并同意《服务协议》和《隐私政策》
                  </Checkbox>
                  <p
                    style={{
                      fontSize: '12px',
                      color: '#00bdff',
                    }}>
                    <a
                      onClick={goLogin}
                    >
                      已有账号？前往登录
                    </a>
                  </p>
                </div>
              }
            >
              <>
                <div style={{ paddingTop: '50px' }}></div>
                <ProFormText
                  fieldProps={{
                    size: 'large',
                    prefix: <UserOutlined className={'prefixIcon'} />,
                  }}
                  label="商户号"
                  name="userName"
                  placeholder={'商户号'}
                  rules={[
                    {
                      required: true,
                      message: '请输入商户号！',
                    },
                  ]}
                />
                <ProFormText
                  fieldProps={{
                    size: 'large',
                    prefix: <MobileOutlined className={'prefixIcon'} />,
                  }}
                  label="手机号"
                  name="mobile"
                  placeholder={'手机号'}
                  rules={[
                    {
                      required: true,
                      message: '请输入手机号！',
                    },
                    {
                      pattern: /^1\d{10}$/,
                      message: '手机号格式错误！',
                    },
                  ]}
                />

                {/* <ProFormCaptcha
                  fieldProps={{
                    size: 'large',
                    prefix: <LockOutlined className={'prefixIcon'} />,
                  }}
                  label="验证码"
                  captchaProps={{
                    size: 'large',
                  }}
                  placeholder={'请输入验证码'}
                  captchaTextRender={(timing, count) => {
                    if (timing) {
                      return `${count} ${'获取验证码'}`;
                    }
                    return '获取验证码';
                  }}
                  name="captcha"
                  rules={[
                    {
                      required: true,
                      message: '请输入验证码！',
                    },
                  ]}
                  onGetCaptcha={async () => {
                    await getPhoneCode(form.getFieldValue('phoneNum')).then(() => {
                      message.success('发送成功');
                    });
                  }}
                /> */}
                <div style={{ height: '20px' }}></div>

              </>
            </LoginForm>
          </div>
        </div>

      </div>
    </div>
  );
};
